<!-- 蓝色简洁登录页面 -->
<template>
	<view>
		<view class="login-logo">
			<u-image shape="circle" width="160rpx" height="160rpx" src="../../static/logo.png"></u-image>
			<view class="logo-title">logo</view>
		</view>
		<view class="form-box">
			<view class="code-box">
				<view class="code-tip">验证码已发送至{{form.phone}}</view>
				<u-message-input :focus="true" @change="change" @finish="finish" mode="bottomLine"></u-message-input>
				<view class="code-tip-box">
					<view>收不到验证码?</view>
					<view class="bl" @click="getCode">{{codeTips}}</view>
				</view>
			</view>
			<u-button :disabled="disabled" shape="circle" type="primary" @click="submit">登陆</u-button>
		</view>
		<u-verification-code @end="end" seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
	</view>
</template>
<script>
export default {
	data() {
		return {
			codeTips: '重新获取',
			key: '',
			endFlag: true,
			disabled: true,
			form: {
				code: '',
				phone: ''
			},
		};
	},
	onLoad(option) {
		this.form.phone = option.phone;
		this.init();
	},
	methods: {
		init() {
			this.$nextTick(()=>{
				this.getCode();
			});
		},
		submit() {
			if(this.form.phone == ''){
				this.$u.toast("请输入手机号");
				return;
			}
			if(this.form.code == ''){
				this.$u.toast("请输入验证码");
				return;
			}
			this.$u.post('/blade-auth/oauth/token',{
				phone: this.form.phone,
				grant_type: 'phone',
				scope: 'all'
			},{
				'Content-Type': 'application/x-www-form-urlencoded',
				'Captcha-Key': this.key,
				'Tenant-Id': this.website.tenantId,
				'Captcha-Code': this.form.code
			}).then(res => {
				this.$u.vuex('vuex_login', false);
				uni.setStorageSync("token", res.access_token);
				uni.navigateTo({
					url: '../index/tabbar?PageCur=index'
				})
			})
		},
		end() {
			this.endFlag = true;
		},
		change(e) {
			this.form.code = e;
		},
		finish(e) {
			this.disabled = false;
		},
		// 获取验证码
		getCode() {
			if(!this.endFlag){
				return;
			}
			if(this.form.phone == ''){
				this.$u.toast("请输入手机号");
				return;
			}
			this.$u.get('/blade-auth/oauth/phone/captcha',{
				tenantId: this.website.tenantId,
				phone: this.form.phone
			}).then(res => {
				this.endFlag = false;
				this.$refs.uCode.start();
				this.key = res.key;
			})
		},
		codeChange(text) {
			this.codeTips = text;
		}
	}
};
</script>
<style lang="scss" scoped>
	page {
		background-color: #fff;
	}
	.login-logo {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		padding: 40px 0;
		background: url(../../static/login/bg.png) no-repeat;
		background-size: 100% 100%;
	}
	.logo-title {
		margin-top: 10px;
		color: #fff;
		font-size: 36rpx;
	}
	.form {
		margin-bottom: 40px;
	}
	.form-box {
		padding: 20px;
	}
	.bl {
		color: #195ED7;
	}
	.code-tip {
		font-size: 28rpx;
	}
	.code-tip-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 10rpx;
		margin-bottom: 160rpx;
		font-size: 26rpx;
	}
</style>
